<template>
  <view class="carryUserRegister-content">
    <h-form :model="model" :rules="rules" ref="uForm">
      <h-form-item class="item" label="昵称" prop="nickName">
          <h-input v-model="model.nickName" placeholder="请填写昵称" />
<!--          <view class="rightIcon">
            <u-icon slot="right" name="arrow-right" color="#c0c4cc" size="16"></u-icon>
          </view>-->
      </h-form-item>

      <h-form-item class="item" label="年龄" prop="age">
          <h-input type="number" v-model="model.age" placeholder="请填写年龄"></h-input>
<!--          <view class="rightIcon">
            <u-icon slot="right" name="arrow-right" color="#c0c4cc" size="16"></u-icon>
          </view>-->
      </h-form-item>

      <h-form-item class="item" label="性别"  prop="sex">
<!--          <u&#45;&#45;input class="right-pic" v-model="model.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
                    border="none" input-align="right"></u&#45;&#45;input>-->
        <h-picker :selector="actions" v-model="model.sex"></h-picker>
<!--          <view class="rightIcon">
            <u-icon slot="right" name="arrow-right" color="#c0c4cc" size="16"></u-icon>
          </view>-->
      </h-form-item>

<!--      <h-form-item class="item" @click="handleImg" :flexAble="false" className="img-formItem">
        <view class="item-left">上传人脸照片</view>
        <view class="item-right">
          <image class="right-pic" :src="model.myPic" />
          <view class="rightIcon">
            <u-icon slot="right" name="arrow-right" color="#c0c4cc" size="16"></u-icon>
          </view>
        </view>
      </h-form-item>-->
      <view class="sub">
        <button @tap="handleSave">保存</button>
      </view>
      <h-toast></h-toast>
    </h-form>
  </view>
</template>

<script>
import Taro from "@tarojs/taro";
import {request} from '../../utils/http.js';
export default {
  data() {
    return {
      model: {
        nickName: '',
        age: '',
        sex: '',
        myPic: Taro.getStorageSync('myPic'),
      },
      rules: {
        'nickName': [{
          required: true,
          message: '请填写姓名/昵称',
          trigger: 'blur'
        }],
        'sex': [{
          type: 'number',
          required: true,
          message: '请选择性别',
          trigger: 'change'
        }],
        'age': [{
          type: 'number',
          required: true,
          trigger: 'blur',
          asyncValidator: (rule, value, callback) => {
            if (!value) {
              callback(new Error('请填写年龄'))
            } else if (isNaN(Number(value))) {
              callback(new Error('年龄必须是数字类型，请重新填写'))
            } else {
              callback()
            }
          },
        }],
      },
      actions: [
        {
          label: '男',
          value: 1,
        },
        {
          label: '女',
          value: 2
        },
      ],
      showSex: false,
    }
  },
  onLaunch: function() {},
  onShow: function() {
    // this.tips = getApp().globalData.text
    // console.log(getApp().globalData.text);

  },
  methods: {
    // 表单提交
    handleSave() {
      if (Taro.getStorageSync('mobile_binded') == 0) {
        Taro.hToast({
          message: '请先绑定手机号',
        });
        setTimeout(() => {
          Taro.redirectTo({
            url: '/pages/loginPhone/index',
          })
        }, 1000)
      } else {
        this.$refs.uForm.validate((valid) => {
          if(valid) {
            request('/user/carried/register', {
              nick_name: this.model.nickName,
              age: Number(this.model.age),
              gender: Number(this.model.sex),
            }).then(res => {
              if (res.code == 0) {
                Taro.hToast({message: '创建成功'})
                setTimeout(() => {
                  Taro.navigateBack()
                }, 1500)
              } else {
                Taro.hToast({message: '创建失败'})
              }
            }).catch(err => {
              Taro.hToast({message: err})
            })
          }
        })
      }
    },
  },
}
</script>

<style lang="less">
.carryUserRegister-content {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .vue-ref {
    width: 100%;
  }

  .u-form {
    width: 100%;
    height: 100vh;
    padding: 0 20rpx;
    box-sizing: border-box;
  }

  .item {
    width: 100%;
    padding: 0 20rpx;
    box-sizing: border-box;
    height: 100rpx;
    background: #fff;
    border-bottom: 1px solid #f6f6f6;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .item-left {
      width: 30%;
      display: flex;
      align-items: center;
      padding-left: 20rpx;
    }

    .item-right {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }

  .right-txt {}

  .rightIcon {
    margin-left: 20rpx;
  }

  .right-pic {
    width: 60rpx;
    height: 60rpx;
  }

  .avatarUrl {
    border-radius: 50%;
  }

  .avatar-wrapper {
    padding: 0;
    width: 60rpx;
    height: 60rpx;
    border-radius: 8rpx;
  }

  .avatar {
    display: block;
    width: 100%;
    height: 100%;
  }

  .container {
    display: flex;
  }

  .u-form-item__body__right__message {
    margin-left: 0;
  }

  ::v-deep .u-button--info {
    background: #d5ad57 !important;
    width: 130rpx !important;
    z-index: 999;
    color: #fff !important;
  }

  .phone-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .sub {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60rpx;
  }

  .sub button {
    border: none;
    width: 80%;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d5ad57;
    border-radius: 20rpx;
    color: #fff;
    font-size: 32rpx;
    font-weight: 400;
  }
}

</style>
